<template>
	<view>
		<view class="form padding-lg" v-show="!loading">
			<image-cropper :src="tempFilePath" @confirm="confirm" @cancel="cancel" :crop-fixed="true"></image-cropper>

			<u-form-item label="logo" label-width="140">
				<image @tap="upload('logo')" class="pic" :src="form.logo ? form.logo : '../../static/images/logo.png'" mode="aspectFit"></image>
			</u-form-item>

			<u-form-item label="公司名称" label-width="140">
				<u-input v-model="form.company" />
			</u-form-item>
		</view>

		<view class="margin-tb padding-tb" v-show="!loading">
			<my-btn :width="420" radius @click="submit">保存</my-btn>
		</view>
	</view>
</template>

<script>
	import ImageCropper from '@/components/invinbg-image-cropper/invinbg-image-cropper.vue'
	import EasyUpload from '@/components/easy-upload/easy-upload.vue'
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tools/index.js'
	export default {
		components: {
			ImageCropper,
			EasyUpload
		},
		data() {
			return {
        loading: false,
        company: '',
				form: {
					company: '',
          logo: '',
          id: ''
				},
				cropperType: '',
				tempFilePath: '',
				fileList: []
			};
		},
		onLoad(opt) {
			this.form.id = opt.id
      if (this.form.id) {
        this.loading = true
        this.getCompany()
      }
		},
		methods: {
      async getCompany() {
				let { company } = await this.$u.api.getCompanyDetail(this.form.id)
        let { picture, company_name } = company
        this.form.logo = picture
        this.form.company = company_name
        this.loading = false
      },
      submit() {
        if (this.form.id) {
          this.editCompany()
        } else {
          this.postCompany()
        }
      },
      async postCompany() {
        let params = {
          company_name: this.form.company,
          picture: this.form.logo
        }
        let res = await this.$u.post('/company/create', params)
        let { msg, result } = res.data
        this.$msg(msg, 500, true).then(res => this.$goto(1))
      },
      async editCompany() {
        let params = {
          company_name: this.form.company,
          picture: this.form.logo,
          id: this.form.id
        }
        let res = await this.$u.post('/company/edit', params)
        let { msg, result } = res.data
        this.$msg(msg, 500, true).then(res => this.$goto(1))
      },
			upload(type) {
				this.cropperType = type
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						this.tempFilePath = res.tempFilePaths.shift()
					}
				});
			},
			confirm(e) {
				this.tempFilePath = ''
				// #ifdef MP
				pathToBase64(e.detail.tempFilePath).then(res => {
					if (this.cropperType == 'logo') {
						this.form.logo = res
					} else if (this.cropperType == 'portrait') {
						this.form.portrait = res
					}
				})
				// #endif
				// #ifdef H5
				if (this.cropperType == 'logo') {
					this.form.logo = e.detail.tempFilePath
				} else if (this.cropperType == 'portrait') {
					this.form.portrait = e.detail.tempFilePath
				}
				// #endif
			},
			cancel() {
				console.log('canceled')
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.pic {
		width: 125rpx;
		height: 125rpx;
		border: 1px #e6e6e6 solid;
		display: block;
		margin: 8rpx;
		border-radius: 8rpx;
	}

	.u-form-item {
		color: #818181 !important;
	}
</style>
